<template>
	<view class="wrap">
		<view class="wrap-accusation">
			<view class="wrap-accusation-title">
				基本情况
			</view>
			<view class="wrap-accusation-list align-justify-space-between" v-for="(item,index) in basicInfoData"
				:key="index" @click="handleClick(item.title)">
				<view class="wrap-accusation-list-l">
					{{item.title}}
				</view>
				<view class="wrap-accusation-list-r align-center">
					<view class="wrap-accusation-list-r-z">
						{{item.content}}
					</view>
					<view class="wrap-accusation-list-r-j" v-show="false">
						未填写
					</view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
		<up-toast ref="uToastRef" style="text-align: center;"></up-toast>
		<up-modal :show="modalShow" :content='modalContent' :confirmText="modalConfirmText" :title="modalTitle"
			:showCancelButton="true" @confirm="modalConfirm" @cancel="modalCancel"></up-modal>
		<pickerPopup :pickerShow="pickerShow" :columns="columns" @cancel="cancel" @confirm="confirm"
			:popupDefaultIndex="popupDefaultIndex" :title="basicInfoText" />
		<btnPopup :experienceShow="btnShow" :data="conditionList[0]" @popupClose="btnPopupClose"
			@conditionSure="btnPopupConfirm" :multiple="false" />
	</view>
</template>

<script setup>
	import pickerPopup from '../common/pickerPopup/index.vue'
	import btnPopup from '../common/btnPopup/index.vue'
	import basicInfo from '/static/json/mateSelectionIntention.json'
	import cityJson from '../../static/json/city.json'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const uToastRef = ref(null)
	const basicInfoData = reactive(basicInfo)
	const basicInfoText = ref('')
	const modalShow = ref(false)
	const modalContent = ref("")
	const modalTitle = ref('')
	const modalConfirmText = ref('')
	const pickerShow = ref(false)
	const columns = reactive([])
	const popupDefaultIndex = ref([])
	const defaultHeight = ref(175)
	const defaultWeight = ref(110)
	const pickerPopupData = ref(['身高', '体重', '居住地', '职业', '月收入'])
	const btnPopupData = ref(['学历', '购房情况', '购车情况', '公司性质','是否吸烟'])
	const pickerPopupData_over = ref(['婚姻'])
	const btnShow = ref(false)
	const conditionList = reactive([{
		title: '学历',
		arr: ['中专', '高中以及一下', '大专', '本科', '硕士']
	}])

	const getHeight = () => {
		let min = 140
		let max = 250
		let arr = []
		for (let i = min; i <= max; i++) {
			arr.push(i + 'cm')
		}
		columns.push(arr)
		popupDefaultIndex.value = [defaultHeight.value - min]
	}

	const getWeight = () => {
		let min = 40
		let max = 150
		let arr = []
		for (let i = min; i <= max; i += 0.1) {
			arr.push(i.toFixed(1) + 'kg')
		}
		columns.push(arr)
		popupDefaultIndex.value = [(defaultWeight.value - min) * 10]
	}

	const getCity = () => {
		columns[0] = cityJson
		columns[1] = cityJson[0].city
	}

	const getMonthlyIncome = () => {
		let min = 2
		let max = 30
		let arr = []
		for (let i = min; i < max; i+=3) {
			arr.push(`${i}-${i+3}千`)
		}
		columns.push(arr)
		// popupDefaultIndex.value = [(defaultWeight.value - min)*10]
	}

	const getAcademicQualification = () => {
		conditionList[0] = {
			title: '学历',
			arr: ['中专', '高中以及一下', '大专', '本科', '硕士']
		}
	}

	const getHomePurchase = () => {
		conditionList[0] = {
			title: '购房',
			arr: ['和家人同住', '已购房', '租房', '打算婚后购房', '住在单位宿舍']
		}
	}

	const getCar = () => {
		conditionList[0] = {
			title: '购车',
			arr: ['已购车', '未购车']
		}
	}

	const getCompanyNature = () => {
		conditionList[0] = {
			title: '公司性质',
			arr: ['国有企业', '集体企业', '私营企业', '股份制企业', '外商投资企业', '事业单位', '个人独资企业']
		}
	}

	const handleClick = (val) => {
		basicInfoText.value = val
		modalTitle.value = ''
		modalConfirmText.value = '确认'
		if (pickerPopupData.value.includes(val) || btnPopupData.value.includes(val)) {
			modalContent.value = `${val}一年只能修改一次，确认修改嘛吗？`
			modalContent.value = modalContent.value.replaceAll('情况', '')
			modalShow.value = true
		} else if (pickerPopupData_over.value.includes(val)) {
			modalConfirmText.value = '联系管家'
			modalTitle.value = '婚姻状况'
			modalContent.value = '为保证信息资料准确性，婚姻状况不能随意修改，如有变动，请联系管家'
			modalShow.value = true
		} else {
			uToastRef.value.show({
				...{
					type: 'default',
					message: "您已完成实名认证，姓名无法修改",
				},
				complete() {
					// params.url && uni.navigateTo({
					// 	url: params.url
					// });
				}
			});
		}
	}
	const modalConfirm = () => {
		modalShow.value = false
		columns.length = 0
		conditionList.length = 0
		if (pickerPopupData.value.includes(basicInfoText.value)) {
			if (basicInfoText.value === '身高') {
				getHeight()
			} else if (basicInfoText.value === '体重') {
				getWeight()
			} else if (basicInfoText.value === '居住地') {
				getCity()
			} else if (basicInfoText.value === '月收入') {
				getMonthlyIncome()
			}
			pickerShow.value = true
		} else if (btnPopupData.value.includes(basicInfoText.value)) {
			if (basicInfoText.value === '学历') {
				getAcademicQualification()
			} else if (basicInfoText.value === '购房情况') {
				getHomePurchase()
			} else if (basicInfoText.value === '购车情况') {
				getCar()
			} else if (basicInfoText.value === '公司性质') {
				getCompanyNature()
			}
			btnShow.value = true
		}
	}

	const modalCancel = () => {
		modalShow.value = false
	}

	const confirm = () => {

	}

	const cancel = () => {
		pickerShow.value = false
	}

	const btnPopupClose = () => {
		btnShow.value = false
	}

	const btnPopupConfirm = () => {

	}
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;

		&-dec {
			margin-bottom: 30rpx;
			background-color: #fff;
			padding: 40rpx;
			box-sizing: border-box;
			font-size: 30rpx;

			&.marginBottom0 {
				margin-bottom: 0;
			}

			&-title {
				margin-bottom: 40rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
				line-height: 34rpx;

				&-subTitle {
					color: #999999;
					font-size: 22rpx;
				}
			}

			&-upload {
				flex-wrap: wrap;

				&-content {
					position: relative;
					width: 148rpx;
					height: 148rpx;
					margin-right: 6rpx;
					flex-direction: column;
					background-color: #F1F1F1;
					border-radius: 12rpx 12rpx 12rpx 12rpx;

					&:nth-child(4),
					&:last-child {
						margin-right: 0;
					}

					&-count {
						font-size: 22rpx;
						color: #999999;
					}

					&-close {
						position: absolute;
						right: 0;
						top: 0;
					}
				}
			}

			&-text {
				padding: 40rpx;
				box-sizing: border-box;
				color: #444444;

				&-content {
					margin-left: 16rpx;
				}
			}

			.bgF1F1F1 {
				background-color: #F1F1F1;
			}

			.bgF8F6FF {
				background-color: #F8F6FF;
			}

			.bgFFF8F6 {
				background-color: #FFF8F6;
			}

			.bgF2FDFF {
				background-color: #F2FDFF;
			}
		}

		&-accusation {
			margin-bottom: 30rpx;
			padding: 40rpx;
			box-sizing: border-box;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			background-color: #fff;

			&-title {
				margin-bottom: 40rpx;
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
			}

			&-list {
				height: 96rpx;
				font-size: 30rpx;

				&-l {
					color: #444444;

					&-subTitle {
						font-size: 22rpx;
						color: #999999;
					}
				}

				&-r {
					color: #222222;

					::v-deep .u-icon {
						margin-left: 20rpx;
					}

					&-j {
						color: #999999;
					}
				}
			}
		}
	}
</style>